<template>
    <div id="table" class="app-container calendar-list-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-input clearable class="filter-item" style="width: 200px;" v-model="keyword" size="small"
                      placeholder="请输入专栏名称"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="handleFind"
                       v-permission="'/subject/getList'">查找
            </el-button>
            <el-button class="filter-item" type="primary" @click="handleAdd" size="small" icon="el-icon-edit"
                       v-permission="'/subject/add'">添加
            </el-button>
            <el-button class="button" type="primary" @click="checkAll()" size="small" icon="el-icon-refresh">
                {{ chooseTitle }}
            </el-button>
            <el-button class="filter-item" type="danger" @click="handleDeleteBatch" size="small" icon="el-icon-delete"
                       v-permission="'/subject/deleteBatch'">删除选中
            </el-button>
        </div>


        <el-table :data="tableData"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  @sort-change="changeSort"
                  :default-sort="{prop: 'sort', order: 'descending'}">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="专栏图" width="240">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.photoList && scope.row.photoList[0]" :src="scope.row.photoList[0]" :preview-src-list="scope.row.photoList"
                         style="width: 235px;height: 50px;"
                    ></el-image>
                </template>
            </el-table-column>

            <el-table-column label="专栏名称" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.subjectName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="专栏作者" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.author }}</span>
                </template>
            </el-table-column>

            <el-table-column
                :sort-by="['isOriginal']"
                label="是否原创"
                width="100"
                align="center"
                prop="isOriginal"
                sortable="custom"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isOriginal == 1" type="success">原创</el-tag>
                    <el-tag v-if="scope.row.isOriginal == 0" type="info">转载</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="精选" width="100" align="center" sortable="custom" :sort-by="['selectionStatus']">
                <template slot-scope="scope">
                    <template>
                        <el-switch v-model="scope.row.selectionStatus" active-color="#F5DEB3"
                                   @change="handChange(scope.row)"></el-switch>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="上架" width="100" align="center" sortable="custom" :sort-by="['publishStatus']">
                <template slot-scope="scope">
                    <template>
                        <el-switch v-model="scope.row.publishStatus" active-color="#13ce66" inactive-color="#ff4949"
                                   @change="handChange(scope.row)"></el-switch>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="章节数" width="100" align="center" prop="subjectItemCount">
                <template slot-scope="scope">
                    <span>{{ scope.row.subjectItemCount }}</span>
                </template>
            </el-table-column>

            <el-table-column label="点击数" width="100" align="center" prop="clickCount" sortable="custom" :sort-by="['clickCount']">
                <template slot-scope="scope">
                    <span>{{ scope.row.clickCount }}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="100" align="center" sortable="custom" :sort-by="['sort']">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.sort }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center" prop="createTime" sortable="custom" :sort-by="['createTime']" :sort-orders="['ascending', 'descending']">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="160">
                <template slot-scope="scope">
                    <el-row>
                        <el-button @click="handleEdit(scope.row)" type="primary" size="mini"
                                   v-permission="'/subject/edit'">编辑
                        </el-button>
                        <el-button @click="handleDelete(scope.row)" type="danger" size="mini"
                                   v-permission="'/subject/deleteBatch'">删除
                        </el-button>
                    </el-row>
                    <el-row style="margin-top: 10px;">
                        <el-button type="success" size="mini" @click="goSubjectItem(scope.row)">管理</el-button>
                        <el-button type="warning" size="mini" @click="goWebSubject(scope.row)">查看</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">

                <el-form-item label="封面图" :label-width="formLabelWidth" prop="fileUid">
                    <div class="imgBody" v-if="form.photoList && form.photoList.length > 0">
                        <i class="el-icon-error inputClass" v-show="icon" @click="deletePhoto()"
                           @mouseover="icon = true"></i>
                        <img @mouseover="icon = true" @mouseout="icon = false" v-bind:src="form.photoList[0]"
                             style="display:inline; width: 195px;height: 105px;"/>
                    </div>
                    <div v-else class="uploadImgBody" @click="checkPhoto">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" label="分类" prop="subjectSortUid">
                    <el-select
                        v-model="form.subjectSortUid"
                        size="small"
                        placeholder="请选择分类"
                        style="width: 200px"
                    >
                        <el-option
                            v-for="item in subjectSortData"
                            :key="item.uid"
                            :label="item.name"
                            :value="item.uid"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="专栏名" :label-width="formLabelWidth" prop="subjectName">
                    <el-input v-model="form.subjectName" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="专栏简介" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.summary" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="专栏作者" :label-width="formLabelWidth" prop="subjectName">
                    <el-input v-model="form.author" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item
                    :label-width="formLabelWidth"
                    label="是否原创"
                    prop="isOriginal"
                >
                    <el-radio-group v-model="form.isOriginal" size="small">
                        <el-radio
                            v-for="item in originalDictList"
                            :key="item.uid"
                            :label="item.dictValue"
                            border
                        >{{ item.dictLabel }}
                        </el-radio
                        >
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    v-if="form.isOriginal == 0"
                    :label-width="formLabelWidth"
                    label="专栏出处"
                >
                    <el-input v-model="form.origin" auto-complete="off"/>
                </el-form-item>


                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="form.sort" auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm(0)">确 定</el-button>
            </div>
        </el-dialog>

        <avatar-cropper
            :key="imagecropperKey"
            :url="url"
            :width="1900"
            :height="250"
            @close="close"
            @crop-upload-success="cropSuccess"
            lang-type="zh"
            v-show="imagecropperShow"
            noSquare
            noCircle
        />

    </div>
</template>

<script>
import {addSubject, deleteBatchSubject, editSubject, getSubjectList} from "@/api/subject";
import {getSubjectSortList,} from "@/api/subjectSort";
import AvatarCropper from '@/components/AvatarCropper'
import {getListByDictTypeList} from '@/api/sysDictData'

export default {
    components: {
        AvatarCropper
    },
    created() {
        this.getDictList()
        this.subjectSortList()
        this.subjectList();
    },
    data() {
        return {
            imagecropperShow: false,
            imagecropperKey: 0,
            url: process.env.FILE_API + "/file/cropperPicture",
            DIDIOK_WEB_URL: process.env.DIDIOK_WEB_URL,
            tableData: [],
            form: {},
            loading: true,
            dialogVisible: false, //控制增加框和修改框的显示
            currentPage: 1,
            total: null,
            pageSize: 18,
            keyword: "",
            chooseTitle: "全选",
            isCheckedAll: false, //是否全选
            selectUids: [], //专栏uid集合
            title: "增加专栏",
            subjectSortData: [], // 专栏分类
            originalDictList: [], // 是否原创字典
            originalDefault: null, // 是否原创默认值
            formLabelWidth: "120px", //弹框的label边框
            dialogFormVisible: false,
            isEditForm: false,
            photoVisible: false, //控制图片选择器的显示
            photoList: [],
            fileIds: "",
            icon: false, //控制删除图标的显示
            orderByDescColumn: 'createTime', // 降序字段
            orderByAscColumn: '', // 升序字段
            isFirstPhotoVisible: true, // 图片选择器是否首次显示【用于懒加载】
            rules: {
                // fileUid: [
                //   {required: true, message: '封面图片不能为空', trigger: 'blur'}
                // ],
                subjectName: [
                    {required: true, message: '专栏名不能为空', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在1到20个字符'},
                ],
                sort: [
                    {required: true, message: '排序字段不能为空', trigger: 'blur'},
                    {pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数'},
                ]
            }
        };
    },
    methods: {
        subjectList: function () {
            var params = {};
            params.keyword = this.keyword;
            params.currentPage = this.currentPage;
            params.pageSize = this.pageSize;
            params.orderByDescColumn = this.orderByDescColumn
            params.orderByAscColumn = this.orderByAscColumn
            getSubjectList(params).then(response => {
                let tableData = response.data.records;
                for (let i = 0; i < tableData.length; i++) {
                    if (tableData[i].isSelection == "1") {
                        tableData[i].selectionStatus = true
                    } else {
                        tableData[i].selectionStatus = false
                    }
                    if (tableData[i].isPublish == "1") {
                        tableData[i].publishStatus = true
                    } else {
                        tableData[i].publishStatus = false
                    }
                }
                this.tableData = tableData;
                this.currentPage = response.data.current;
                this.pageSize = response.data.size;
                this.total = response.data.total;
            });
        },

        /**
         * 字典查询
         */
        getDictList: function () {
            const dictTypeList = [
                'sys_original_status'
            ]
            getListByDictTypeList(dictTypeList).then((response) => {
                if (response.code == this.$ECode.SUCCESS) {
                    const dictMap = response.data
                    this.originalDictList = dictMap.sys_original_status.list
                    if (dictMap.sys_original_status.defaultValue) {
                        this.originalDefault = dictMap.sys_original_status.defaultValue
                    }
                }
            })
        },
        // 专栏分类
        subjectSortList: function () {
            let params = {};
            params.currentPage = 1;
            params.pageSize = 100;
            getSubjectSortList(params).then(response => {
                if (response.code == this.$ECode.SUCCESS) {
                    this.subjectSortData = response.data.records;
                }
            });
        },

        // 从后台获取数据,重新排序
        changeSort(val) {
            console.log("默认排序", val)
            // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
            if (val.order == "ascending") {
                this.orderByAscColumn = val.prop
                this.orderByDescColumn = ""
            } else {
                this.orderByAscColumn = ""
                this.orderByDescColumn = val.prop
            }
            this.subjectList()
        },
        handleFind: function () {
            this.currentPage = 1
            this.subjectList();
        },
        getFormObject: function () {
            let formObject = {
                uid: null,
                subjectName: null,
                summary: null,
                fileUid: null,
                sort: 0
            };
            return formObject;
        },
        //点击单选
        checked: function (data) {
            let idIndex = this.selectUids.indexOf(data.uid);
            if (idIndex >= 0) {
                //选过了
                this.selectUids.splice(idIndex, 1);
            } else {
                this.selectUids.push(data.uid);
            }
        },
        checkAll: function () {
            //如果是全选
            if (this.isCheckedAll) {
                this.selectUids = [];
                this.isCheckedAll = false;
                this.chooseTitle = "全选";
            } else {
                this.selectUids = [];
                this.tableData.forEach(function (picture) {
                    this.selectUids.push(picture.uid);
                }, this);
                this.isCheckedAll = true;
                this.chooseTitle = "取消全选";
            }
        },
        cropSuccess(resData) {
            this.imagecropperShow = false
            this.imagecropperKey = this.imagecropperKey + 1
            this.form.photoList = [resData.url];
            this.form.fileUid = resData.uid
        },
        close() {
            this.imagecropperShow = false
        },
        deletePhoto: function () {
            console.log("删除图片", this.form)
            this.form.photoList = [];
            this.form.fileUid = "";
            this.icon = false;
        },
        //弹出选择图片框
        checkPhoto() {
            this.imagecropperShow = true
        },

        //改变页码
        handleCurrentChange(val) {
            let that = this;
            this.currentPage = val; //改变当前所指向的页数
            this.subjectList();
        },
        //点击新增
        handleAdd: function () {
            this.title = "增加专栏"
            this.dialogFormVisible = true;
            this.form = this.getFormObject();
            this.isEditForm = false;
        },
        //点击编辑
        handleEdit: function (row) {
            this.title = "编辑专栏"
            this.dialogFormVisible = true;
            this.isEditForm = true;
            console.log(row);
            this.form = row;
        },
        handleDelete: function (row) {
            this.$confirm("此操作将会把该专栏删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    var params = [];
                    params.push(row);
                    deleteBatchSubject(params).then(response => {
                        if (response.code == "success") {
                            this.$commonUtil.message.success(response.message)
                        } else {
                            this.$commonUtil.message.error(response.message)
                        }
                        this.subjectList();
                    });
                })
                .catch(() => {
                    this.$commonUtil.message.info("已经取消删除")
                });
        },
        goSubjectItem: function (row) {
            let uid = row.uid;
            this.$router.push({
                path: "subjectItem",
                query: {subjectUid: uid}
            });
        },
        goWebSubject: function (row) {
            window.open(this.DIDIOK_WEB_URL + "/subject/" + row.uid, "_blank");
        },
        handleDeleteBatch: function () {
            let that = this;
            if (that.selectUids.length <= 0) {
                this.$commonUtil.message.error("请先选中需要删除的内容！")
                return;
            }
            this.$confirm("此操作将把选中的专栏删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let deleteList = []
                    for (let i = 0; i < this.selectUids.length; i++) {
                        let params = {}
                        params.uid = this.selectUids[i]
                        deleteList.push(params)
                    }
                    deleteBatchSubject(deleteList).then(response => {
                        if (response.code == this.$ECode.SUCCESS) {
                            this.$commonUtil.message.success(response.message)
                        } else {
                            this.$commonUtil.message.error(response.message)
                        }
                        that.subjectList();
                    });
                })
                .catch(() => {
                    this.$commonUtil.message.info("已取消删除")
                });
        },
        // 改变多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handChange(row) {
            if (row.selectionStatus) {
                row.isSelection = 1
            } else {
                row.isSelection = 0
            }
            if (row.publishStatus) {
                row.isPublish = 1
            } else {
                row.isPublish = 0
            }
            this.form = row;
            this.submitForm(1)
        },
        submitForm: function (submitType) {

            if (submitType == 0) {
                this.$refs.form.validate((valid) => {
                    if (!valid) {
                        console.log("校验出错")
                    } else {
                        if (this.isEditForm) {
                            editSubject(this.form).then(response => {
                                if (response.code == this.$ECode.SUCCESS) {
                                    this.$commonUtil.message.success(response.message)
                                    this.dialogFormVisible = false;
                                    this.subjectList();
                                } else {
                                    this.$commonUtil.message.error(response.message)
                                }
                            });
                        } else {
                            addSubject(this.form).then(response => {
                                if (response.code == this.$ECode.SUCCESS) {
                                    this.$commonUtil.message.success(response.message)
                                    this.dialogFormVisible = false;
                                    this.subjectList();
                                } else {
                                    this.$commonUtil.message.error(response.message)
                                }
                            });
                        }
                    }
                })
            } else {
                editSubject(this.form).then(response => {
                    if (response.code == this.$ECode.SUCCESS) {
                        this.$commonUtil.message.success(response.message)
                        this.dialogFormVisible = false;
                        this.subjectList();
                    } else {
                        this.$commonUtil.message.error(response.message)
                    }
                });
            }
        },
    }
};
</script>
<style scoped>

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    margin: 0, 0, 0, 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 195px;
    height: 105px;
    line-height: 105px;
    text-align: center;
}

.imgBody {
    width: 195px;
    height: 105px;
    border: solid 2px #ffffff;
    float: left;
    position: relative;
}

.uploadImgBody {
    margin-left: 5px;
    width: 195px;
    height: 105px;
    border: dashed 1px #c0c0c0;
    float: left;
    position: relative;
}

.uploadImgBody :hover {
    border: dashed 1px #00ccff;
}

.inputClass {
    position: absolute;
}

.img {
    width: 100%;
    height: 100%;
}

.media-title {
    color: #8492a6;
    font-size: 14px;
    padding: 14px;
    display: inline-block;
    white-space: nowrap;
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-image {
    width: 100%;
    height: 160px;
}

.subjectName {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    /*top: 15px;*/
    background: rgba(232, 40, 74, .8);
    color: #FFF;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 3px;
}
</style>
